<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>

    <th:block th:include="home/commons/include :: common_header('个人中心主页')"/>
    <th:block th:include="include :: bootstrap-fileinput-css" />
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/index/layui/css/layui.css}" />
</head>
<body>

<th:block th:include="home/commons/include :: index-header(6)"/>
<style>
    .layui-btn
    {
        color: #FFF;
    }
</style>


<div class="wrapper wrapper-content animated fadeInRight" style="padding: 0px">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content" style="padding: 30px 600px 20px 550px;min-height: 600px; height: auto">

                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">预约记录</li>
                            <li >个人信息</li>
                            <li>修改密码</li>
                        </ul>
                        <div class="layui-tab-content">
                            <!--预约记录-->
                            <div class="layui-tab-item layui-show">
                                <div class="container-div">
                                    <div class="row">
                                        <div class="col-sm-12 select-table table-striped">
                                            <table class="layui-table" lay-skin="line">
                                                <thead>
                                                <tr>
                                                    <th>开始时间</th>
                                                    <th>结束时间</th>
                                                    <th>天数</th>
                                                    <th>时间</th>
                                                    <th>总价格</th>
                                                    <th>操作</th>
                                                    <th>取消预约</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr th:each="roomReserve : ${roomReserves}" th:row-id="${roomReserve.roomId}"
                                                    th:item-id="${roomReserve.id}">
                                                    <td th:text="${#calendars.format(roomReserve.startDateTime, 'yyyy-MM-dd HH:mm:ss') }"></td>
                                                    <td th:text="${#calendars.format(roomReserve.endDateTime, 'yyyy-MM-dd HH:mm:ss') }"></td>
                                                    <td th:text="${roomReserve.getRoom().price}"></td>
                                                    <td th:switch="${roomReserve.getRoom().isTimeLimit == 1}">
                                                        <font th:case="true">[[${roomReserve.count}]]天</font>
                                                        <font th:case="false">[[${roomReserve.count}]]小时</font>
                                                    </td>
                                                    <td th:text="${roomReserve.prices}"></td>
                                                    <td th:switch="${roomReserve.israte == 1}">
                                                        <input th:case="true" type="button" class="layui-btn layui-btn-sm rate-save" value="评分"/>
                                                        <input th:case="false" disabled type="button" class="layui-btn-sm
                                                        layui-disabled" value="评分"/>
                                                    </td>
                                                    <td th:switch="${roomReserve.status == 1}">
                                                        <input th:case="false" type="button"
                                                               class="layui-btn layui-btn-primary layui-btn-sm remove-btn" value="取消" />

                                                        <input th:case="true" type="button"
                                                               class="layui-disabled layui-btn-sm" disabled value="取消" />
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                            <div class="pages">
                                                <ul>
                                                    <li><a th:href="@{/home/index/personal_center(pageNum=1)}" class="on"> 首页</a></li>
                                                    <li><a th:if="${pageInfo.pageNum>1}" th:href="@{/home/index/personal_center(pageNum=${pageInfo.getPageNum()-1})}" class="next">
                                                        <em class="">上一页</em></a>
                                                    </li>
                                                    <li><a th:if="${pageInfo.pageNum<pageInfo.getPageSize()}" th:href="@{/home/index/personal_center(pageNum=${pageInfo.getPageNum()+1})}" class="next">
                                                        <em class="">下一页</em></a>
                                                    </li>
                                                    <li><a th:href="@{/home/index/personal_center(pageNum=${pageInfo.getPages()})}" class="on"> 末页</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--个人信息-->
                            <div class="layui-tab-item ">
                                <form id="editAccount-form" class="form-horizontal" >
                                    <input name="id" th:value="${logindeAccount.id}" type="hidden">

                                    <input name="headPic" id="headPic"th:value="${logindeAccount.headPic}" class="form-control" type="hidden">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">头像：</label>
                                        <div class="fileinput fileinput-new col-sm-8" data-provides="fileinput">
                                            <div th:if="${logindeAccount.headPic} ne null" class="fileinput-new thumbnail" style="width: 300px; height: 200px;">
                                                <img th:src="${logindeAccount.headPic}" id="uploadImg" >
                                            </div>
                                            <div class="fileinput-new thumbnail" th:if="${logindeAccount.headPic} eq null"  style="width: 300px; height: 200px;">
                                                <img src="/home/index/images/sssssssss.png" id="uploadImg" >
                                            </div>
                                            <div>
                                                <span class="btn btn-white btn-file">
                                                    <span class="fileinput-new">选择图片</span>
                                                    <input type="file" name="filePath" id="filePath" onchange="uploadFile()" accept="image/*">
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">住客姓名</label>
                                        <div class="col-sm-10">
                                            <input type="text" id="name" name="name" class="form-control" readonly th:value="${logindeAccount.name}">
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">登录手机</label>
                                        <div class="col-sm-10">
                                            <input type="text" name="phone" class="form-control" readonly th:value="${logindeAccount.phone}">
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">邮箱</label>
                                        <div class="col-sm-10">
                                            <input type="text" id="email" name="email" class="form-control" th:value="${logindeAccount.email}">
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>

                                    <div class="form-group">
                                        <div class="controls">
                                            <div class="main_input_box">
                                                <label class="col-sm-2 control-label">性别</label>
                                                <input th:checked="${logindeAccount.sex == 2}" style="width: 123px" type="radio" name="sex"  value="2"/>
                                                <span style="color: yellowgreen">未知</span>
                                                <input th:checked="${logindeAccount.sex == 1}" style="width: 122px" type="radio" name="sex"  value="1" />
                                                <span style="color: yellowgreen">男</span>
                                                <input th:checked="${logindeAccount.sex == 0}" style="width: 122px" type="radio" name="sex"  value="0"/>
                                                <span style="color: yellowgreen">女</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                </form>
                                <div class="form-group">
                                    <div class="col-sm-4 col-sm-offset-2">
                                        <a class="btn btn-primary"  onclick="editAccount()">修改</a>
                                    </div>
                                </div>

                            </div>


                            <!--修改密码-->
                            <div class="layui-tab-item">
                                <form id="editPassword-form" class="form-horizontal" >
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">原密码</label>
                                        <div class="col-sm-10">
                                            <input type="password" id="oldPassword" name="oldPassword" class="form-control" placeholder="请输入原密码">
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">新密码</label>
                                        <div class="col-sm-10">
                                            <input type="password" id="newPassword" name="newPassword" class="form-control" placeholder="请输入新密码">
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">确认密码</label>
                                        <div class="col-sm-10">
                                            <input type="password" id="checkPassword" class="form-control" placeholder="请重新输入新密码">
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                </form>
                                <div class="form-group">
                                    <div class="col-sm-4 col-sm-offset-2">
                                        <a class="btn btn-primary"  onclick="editPassword()">修改</a>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--对话框-->
<div class='simple_dlg_define' style='display:none'>
    <div class='pane' style='padding:16px'>
        <div style='padding:10px' class="layui-form-item">
            <label class="layui-form-label">评分:</label>
            <div class="layui-input-block">
                <div id="test6">

                </div>
            </div>
        </div>
    </div>
</div>


<th:block th:include="home/commons/include :: index-foot" />
<th:block th:include="include :: jasny-bootstrap-js" />


<script type="text/javascript" th:src="@{/home/js/jquery.tips.js}"></script>
<script th:src="@{/index/layui/layui.all.js}"></script>
<script th:src="@{/index/layui/layui.js}"></script>
<style>
    .form-group {
        margin-bottom: 5px;
    }
    .hr-line-dashed {
        border-top: 1px dashed #e7eaec;
        color: #ffffff;
        background-color: #ffffff;
        height: 1px;
        margin: 20px 0;
    }
</style>

<script>


    // 图片上传
    function uploadFile() {
        var formData = new FormData();
        if ($('#filePath')[0].files[0] == null) {
            $.modal.alertWarning("请先选择文件路径");
            return false;
        }

        formData.append('file', $('#filePath')[0].files[0]);
        $.ajax({
            url: "/common/upload/image",
            type: 'post',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            dataType: "json",
            success: function(result) {
                if(result.code == 0)
                {
                    $("#headPic").val(result.fileName);
                    $("#uploadImg").attr("src", result.fileName);
                }
                else{
                    layer.open({
                        title: '错误警告'
                        ,content: '图片上传失败'
                    });
                }
            }
        });
    }


    //检验用户修改信息
    function checkEdit() {
        if ($("#email").val() == "") {
            $("#email").tips({
                side: 1,
                msg: '邮箱不能为空',
                bg: '#AE81FF',
                time: 2
            });
            showfh();
            $("#email").focus();
            return false;
        } else if (!ismail($("#email").val())) {
            $("#email").tips({
                side: 1,
                msg: '邮箱格式不正确',
                bg: '#AE81FF',
                time: 2
            });
            $("#email").focus();
            return false;
        }

        return true;
    }

    //修改用户信息
    function editAccount() {
        if (checkEdit()) {
            var data = $("#editAccount-form").serialize();
            $.ajax({
                type: "POST",
                url: 'edit',
                data: data,
                dataType: 'json',
                cache: false,
                success: function () {
                    alert("修改成功!");
                    window.location.href = "personal_center";
                }
            });
        }
    }



    //检验用户修改密码
    function chkPassword() {
        if ($("#oldPassword").val() == "") {
            layer.msg(
                "原密码不能为空",
                {icon:5}
            );
            $("#oldPassword").focus();
            return false;
        }
        if ($("#newPassword").val() == "") {
            layer.msg(
                "新密码不能为空",
                {icon:5}
            );
            $("#newPassword").focus();
            return false;
        }
        if ($("#newPassword").val().length < 6 || $("#newPassword").val().length > 10) {
            layer.msg(
                "密码长度为6-10位",
                {icon:5}
            );
            $("#newPassword").focus();
            return false;
        }
        if ($("#checkPassword").val() != $("#newPassword").val()) {
            layer.msg(
                "两次密码不相同",
                {icon:5}
            );
            $("#checkPassword").focus();
            return false;
        }
        return true;
    }

    //修改用户密码
    function editPassword() {
        if (chkPassword()) {
            var data = $("#editPassword-form").serialize();
            $.ajax({
                type: "POST",
                url: 'editPassword',
                data: data,
                dataType: 'json',
                cache: false,
                success: function (data) {
                    if (data.code == 0){
                        layer.msg(
                            "密码修改成功",
                            {icon:1}
                        );
                        window.location.href = "personal_center";
                    } else if (data.code == 600) {
                        layer.msg(
                            "密码不能为空",
                            {icon:5}
                        );
                    }else if (data.code == 601) {
                        layer.msg(
                            "原密码不正确",
                            {icon:5}
                        );
                    }else if (data.code == 602) {
                        layer.msg(
                            "原密码和新密码不能相同",
                            {icon:5}
                        );
                    }

                }
            });
        }
    }



    function ismail(mail) {
        return (new RegExp(/^(?:[a-zA-Z0-9]+[_\-\+\.]?)*[a-zA-Z0-9]+@(?:([a-zA-Z0-9]+[_\-]?)*[a-zA-Z0-9]+\.)+([a-zA-Z]{2,})+$/).test(mail));
    }

    var M = {};
    M.rateValue = 5;

    layui.use(['form', 'element', 'upload','rate'], function () {
        var rate = layui.rate;

        rate.render({
            elem: '#test6'
            ,value: 1.5
            ,half: true
            ,text: true
            ,setText: function(value){
                this.span.text(value);
            }
        });

        $(".rate-save").click(function () {
            var view = $(this).parent().parent();
            var id = Number(view.attr("row-id"));
            var itemid = Number(view.attr("item-id"));
            var dlgContent = $('.simple_dlg_define').html(); // 窗口内容
            layer.open({
                type: 1,
                title: '评分',
                area: ['420px', 'auto'],
                content: dlgContent,
                btn: ['发表', '取消'],
                btn1: function (index, layero) {

                    $.ajax({
                        url:"rate_add",
                        type:'POST',
                        data:{roomId:id,value:M.rateValue,itemid:itemid},
                        dataType:'json',
                        success:function(data){
                            if(data.code == 0)
                            {
                                layer.close(index);
                                layer.msg("评分成功");
                                location.href = "personal_center";
                            }
                            else
                            {
                                layer.close(index);
                                layer.msg(data.msg);
                            }
                        },
                        error:function(data){
                            layer.msg("网络错误")
                        }
                    });
                },
                btn2: function (index, layero) {
                    layer.close(index)
                },
                success: function (layero, index) {
                    layui.use('rate', function () {
                        rate.render({
                            elem: $('#test6', layero)
                            , value: 5
                            , half: true
                            , text: true
                            , setText: function (value) {
                                this.span.text(value);
                                M.rateValue = value;
                            }
                        });
                    });
                }
            });
        });

    });


    $(".remove-btn").click(function () {
        var view = $(this).parent().parent();
        var itemid = Number(view.attr("item-id"));
        layer.confirm('是否取消预定吗？',
        {
            btn: ['确定','取消'] //按钮
        },
        function(index, layero){
            $.ajax({
                url:"remove_reserve",
                type:'POST',
                data:{id:itemid},
                dataType:'json',
                success:function(data){
                    if(data.code == 0)
                    {
                        layer.msg("取消成功",{icon:1});
                        location.href = "personal_center";
                    }
                    else
                    {
                        layer.msg(data.msg);
                    }
                },
                error:function(data){
                    layer.msg("网络错误")
                }
            });
            layer.close(index);
        },
        function(index, layero){
            layer.close(index);
        });
    });

</script>
</body>
</html>